<template>
	<div class="table">
		<!-- <div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-cascades"></i>接口分组</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="addEdit">新建</el-button>
			</div>

            <el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable">
                <el-table-column v-for="(item,index) in tableLabel" :key="index" :prop="item.prop" :width="item.width"
                                 :label="item.label">
                </el-table-column>

                <el-table-column label="操作" width="220" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" icon="el-icon-edit"
                                   @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete"
                                   @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
		</div>


		<!-- 添加弹出框 -->
		<el-dialog v-dialogDrag :title="title" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="150px" :rules="rules">
				<el-form-item label="接口分组名称:" prop="name" required>
					<el-input v-model="form.name" placeholder="请输入接口分组名称"></el-input>
				</el-form-item>
			</el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit" v-if="isEdit" v-preventReClick>保 存</el-button>
				<el-button type="primary" @click="saveEdit" v-else v-preventReClick>确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import common from "../../common/common";

    export default {
		data() {
			return {
				title: '添加亮点',
				editVisible: false, //默认弹框隐藏
				delVisible: false, //默认删除提示框隐藏
				// 表头标题数据
				tableLabel: [
                    {label: '序号', width: '60', prop: 'xuHao'},
                    {label: '接口分组名称', width: '', prop: 'name'},
				],
                isEdit: false, //编辑确认按钮默认隐藏
                // 弹框表单
                form: {
                    name: '',
                    pid: '',
                    apis: '',
                    des:''
                },
                loading: false,
                id: '',
                page: 1,
                limit: 10,
                total: 0,
                params: {
                    page: 1,
                    per_page: 10
                },
                locationList: [],//列表数据
                rules: {
                    name: [{required: true, message: "请输入接口分组名称",trigger:'blur'}],
                },
			}
		},
        created() {
            this.getLocationList();
        },
        activated() {
			this.getLocationList();
		},

		methods: {
            // 分页
            handleSizeChange(size) {
                this.params.per_page = size;
                this.getLocationList();
            },
            handleCurrentChange(index) {
                this.params.page = index;
                this.getLocationList();
            },
			// 获取区域列表
			getLocationList() {
                common.getQueryList(this.$api.permissionGroups, this.params, this);
			},

			// 点击新建按钮
			addEdit() {
                this.title = '添加接口分组';
                this.form = this.$options.data().form;
                this.editVisible = true;
                this.isEdit = false;
			},
			// 点击确定按钮
			saveEdit() {
                if(this.$isEmpty(this.form.name)){
                    return this.$message.error('请输入接口分组名称');
                }
                let params = {name:this.form.name};
                if(this.isEdit){
                    common.editData(this.$api.permissionGroups + '/'+ this.id,params,this);
                }else{
                    common.addData(this.$api.permissionGroups,params,this);
                }
			},
			// 点击编辑按钮
			handleEdit(index, row) {
                this.editVisible = true;
                this.isEdit = true;
                this.title = '编辑接口分组';
                this.id = row.id;
                this.form.name = row.name;
			},
			// 点击删除按钮
			handleDelete(index, row) {
                let tip = '此操作将删除该接口分组, 是否继续?';
                let url = this.$api.permissionGroups + '/' + row.id;
                common.deleteData(url,tip,this);
			},
		}
	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.del-dialog-cnt {
		font-size: 16px;
		text-align: center
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.mr10 {
		margin-right: 10px;
	}

	.avatar-uploader {
		margin-top: 20px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 178px;
		height: 178px;
	}

	.avatar-uploader:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: flex;
	}
</style>
